import React, { Component, Fragment, createRef } from 'react'
import Mycontext from '../../utils/context'

class TodoListInput extends Component {
  state = {
    inputValue: ''
  }
  inputRef = createRef()

  InputChange = (e) => {
    this.setState({
      inputValue: e.target.value
    })
  }
  AddItem = () => {
    if (this.state.inputValue.trim().length === 0) {

    }else {
      this.context.AddInput(this.state.inputValue)
      this.setState({
        inputValue:''
      })
      // this.refs.abc.focus()
      this.inputRef.current.focus()
    }
  }
  EnterItem = (e) => {
    if (e.keyCode === 13) {
      this.AddItem()
    }
  }
  //一键删除所有待办事项
  Alldelet = () => {
    this.context.AllDelet()
  }
  //删除选中待办事项
  // DeleteXz = () => {
  //   this.props.deletxz()
  // }

  render() {
    return (
      <Fragment>
        <div className="input-but">
          <div className="container">
            <div className="field is-grouped">
              <p className="control is-expanded">
                <input
                  className="input"
                  type="text"
                  placeholder="请输入待办事项"
                  value={this.state.inputValue}
                  onChange={this.InputChange}
                  onKeyDown={this.EnterItem}
                  // ref="abc"
                  ref={this.inputRef}
                />
              </p>
              <p className="control">
                <button className="button is-info" onClick={this.AddItem}>
                  添加
                </button>&nbsp;
                <button className="button is-info" onClick={this.Alldelet}>
                  一键删除待办事项
                </button>
                <button className="button is-info" onClick={this.DeleteXz}>
                  删除选中待办事项
                </button>
              </p>
            </div>
          </div>
        </div><br/>
      </Fragment>
    )
  }
}
TodoListInput.contextType = Mycontext
export default TodoListInput
